<template>
	<view>
		<u-sticky>
			<view class="header" id="header">
				<!-- <u-navbar :title="'每月报表'"  bgColor="transparent" :titleStyle="'color: white'"
					:leftIconColor="'white'" placeholder="true" autoBack /> -->
				<view style="display: flex;justify-content: space-around;margin-top: -4rpx;padding: 20rpx;">
					<view :class="selectDayType == 0 ? 'select-item' : 'no-select-item'" @click="changeDayType(0)">
						今天
					</view>
					<view :class="selectDayType == 1 ? 'select-item' : 'no-select-item'" @click="changeDayType(1)">
						昨天
					</view>
					<!-- 	<view :class="selectDayType == 2 ? 'select-item' : 'no-select-item'" @click="changeDayType(2)">
						本周
					</view> -->
					<view :class="selectDayType == 3 ? 'select-item' : 'no-select-item'" @click="changeDayType(3)">
						本月
					</view>
					<view :class="selectDayType == 5 ? 'select-item' : 'no-select-item'" @click="changeDayType(5)">
						上月
					</view>
					<view :class="selectDayType == 4 ? 'select-item' : 'no-select-item'" @click="changeDayType(4)">
						本年
					</view>
					<view class="custom" @click="selectTime(-1)"
						:class="selectDayType == -1 ? 'custom-select' : 'custom'">
						<view class="u-p-l-15">自定义</view>
						<view class="u-p-r-15" v-if="selectDayType == -1">
							<u-icon name="arrow-right" size="13px" color="rgb(96, 114, 255)"></u-icon>
						</view>
						<view class="u-p-r-15" v-else>
							<u-icon name="arrow-right" size="13px" color="#fff"></u-icon>
						</view>
					</view>
				</view>
				<view class="filter-criteria-box">
					<view class="filter-criteria" @click="showSelectStore()">
						<view v-if="selectMchStoreId == -1">
							全部场地（{{totalMerchantStore}}个）
						</view>
						<view v-else>
							{{selectMchStoreName}}
						</view>
						<u-icon name="arrow-down-fill" color="#FFFFFF" size="12"></u-icon>
					</view>
				</view>
				<view style="height: 35rpx;"></view>
				<u-calendar :show="showTime" @confirm="confirmTime()" @cancel="cancelTime()" closeOnClickOverlay="true"
					@close="closeTime()" :minDate="timesTempMin" :maxDate="timesTempMax" monthNum="13" startText="开始"
					endText="结束"  :defaultDate="defaultDateMultiple" mode="range"
					:allowSameDay="true">
				</u-calendar>
			</view>
		</u-sticky>


		<view class="content">
			<view :style="'height:'+(height - tabBarHeight)+'px'">
				<!-- API链接: https://ext.dcloud.net.cn/plugin?id=7511 -->
				<zb-table :fit="true" :columns="column" :stripe="true" :border="false" :data="statsDeviceList"
					@sort-change="sort"></zb-table>
			</view>
		</view>

		<u-picker :show="selectStoreShow" :closeOnClickOverlay="true" @close="closeSelectStore()"
			@confirm="selectStoreConfirm" @cancel="closeSelectStore()" :columns="merchantStoreVoColumns"
			keyName="storeName"></u-picker>
	</view>
</template>

<script>
	export default {
		props: {
			// 底部导航栏高度
			tabBarHeight: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				selectDayType: 0,
				//全部场地
				totalMerchantStore: 0,
				//总设备
				totalDevice: 0,

				current: 0,

				// 商家
				selectStoreShow: false,
				merchantStoreVoColumns: [],
				selectMchStoreId: -1,
				selectMchStoreName: '',

				// 设备
				deviceTypeVoColums: [],
				selectDeviceTypeId: -1,
				selectDeviceTypeName: '',

				// 时间
				startTime: null,
				endTime: null,
				startDateStr: '',
				endDateStr: '',
				timePickerType: '',
				datePicker: new Date().getTime(),
				showTime: false,
				timesTempMin: '',
				timesTempMax: '',
				defaultDateMultiple: [this.$date.dateFormatYMD(new Date()), this.$date.dateFormatYMD(new Date())],


				height: 0,
				column:[
				  { name: 'deviceNo', label: '机器',fixed:true,align:'center',sorter:'custom'},
				  { name: 'totalQuantity', label: '数量',align:'center',sorter:'custom'},
				  { name: 'totalRetailPrice_str', label: '销售额',align:'center',sorter:'custom',width:170},
				  { name: 'profit_str', label: '利润',align:'center',sorter:'custom'},
				],
				statsDeviceList: []
			}
		},
		methods: {
			Load() {
				this.loadData();
				this.startTime = new Date();
				this.endTime = new Date();
				this.startDateStr = this.$date.dateFormatYMD(this.startTime);
				this.endDateStr = this.$date.dateFormatYMD(this.endTime);
				// this.getAllDeviceType();
			},
			Ready() {
				this.timesTempMin = Number(new Date().setFullYear((new Date().getFullYear() - 1)))
				this.timesTempMax = Number(this.$date.getEndDate())
				this.getPomHeight()
			},

			//加载数据
			loadData() {
				this.findStoreList();
				this.findData();
			},

			changeDayType(num) {
				this.selectDayType = num;
				let time = this.$date.getTime();
				let startTime = '';
				let endTime = '';
				this.defaultDateMultiple = []
				switch (this.selectDayType) {
					case 0:
						// 获取今天的日期
						startTime = this.$date.dateFormatYMD(new Date());
						endTime = this.$date.dateFormatYMD(new Date());
						break;
					case 1:
						// 获取昨天的日期
						startTime = this.$date.dateFormatYMD(time.startYesterday);
						endTime = this.$date.dateFormatYMD(time.startYesterday);
						break;
					case 2:
						// 获取本周的日期
						startTime = this.$date.dateFormatYMD(time.startWeek);
						endTime = this.$date.dateFormatYMD(new Date());
						break;
					case 3:
						// 获取本月的日期
						startTime = this.$date.dateFormatYMD(time.startThisMonth);
						endTime = this.$date.dateFormatYMD(new Date());
						break;
					case 4:
						// 获取今年的日期
						startTime = this.$date.dateFormatYMD(time.startThisYear);
						endTime = this.$date.dateFormatYMD(new Date());
						break;
					case 5:
						// 获取上月的日期
						startTime = this.$date.dateFormatYMD(time.startLastMonth);
						endTime = this.$date.dateFormatYMD(time.endLastMonth);
						break;
				}
				this.defaultDateMultiple.push(startTime)
				this.defaultDateMultiple.push(endTime)
				this.loadData();
			},

			getAllDeviceType() {
				this.$api('deviceType.findAllDeviceType').then(res => {
					if (res.data) {
						this.totalDevice = res.data.length;
					}
					let deviceTypeColums = [];
					let deviceTypeAll = {
						id: -1,
						deviceTypeName: '全部设备类型'
					}
					deviceTypeColums.push(deviceTypeAll);
					deviceTypeColums = [...deviceTypeColums, ...res.data]
					this.deviceTypeVoColums = []
					this.deviceTypeVoColums.push(deviceTypeColums)
				})
			},
			//选择设备类型
			selectDeviceTypeConfirm(e) {
				this.selectDeviceTypeId = e.value[0].id;
				this.selectDeviceTypeName = e.value[0].deviceTypeName
				this.closeSelectDeviceType();
				this.loadData();
			},
			//选择场地
			selectStoreConfirm(e) {
				this.selectMchStoreId = e.value[0].id;
				this.selectMchStoreName = e.value[0].storeName
				this.loadData()
				this.closeSelectStore();
			},
			closeSelectStore() {
				this.selectStoreShow = false;
			},
			showSelectStore() {
				this.selectStoreShow = true;
			},
			//日历弹框
			selectTime() {
				this.showTime = true;
				this.selectDayType = -1;

			},
			//自定义时间
			confirmTime(e) {
				this.startDateStr = e[0]
				this.endDateStr = e[e.length - 1]
				this.selectDayType = -1;
				this.showTime = false;
				this.loadData();
			},
			cancelTime() {
				this.showTime = false;
			},
			closeTime() {
				this.showTime = false;
			},
			findStoreList() {
				let api = "";
				if (this.selectDeviceTypeId && this.selectDeviceTypeId != -1) {
					api = "merchantStore.findMerchantStoreIdByUserIdAndDeviceTypeId";
				} else {
					api = "merchantStore.findMerchantStoreIdByUserId"
				}
				let params = {
					deviceTypeId: this.selectDeviceTypeId
				}
				this.$api(api, params).then(res => {
					if (res.status == 0) {
						if (res.data) {
							this.totalMerchantStore = res.data.length;
						}
						let merchantStoreColums = [];
						let all = {
							id: -1,
							storeName: '全部场地'
						}
						merchantStoreColums.push(all);
						this.merchantStoreVoColumns = [];
						this.merchantStoreVoColumns.push([...merchantStoreColums, ...res.data]);
						if (res.data.length == 0) {
							this.selectMchStoreId = -1;
						}
					} else {
						this.$helpers.toast("请求数据失败:" + res.msg);
					}
				}).catch(e => {
					console.log(e);
					this.$helpers.toast('场地查询失败，服务器访问失败');
				})
			},
			findData() {
				let params = {
					dayType: this.selectDayType,
					mchStoreId: this.selectMchStoreId,
					startDateStr: this.startDateStr,
					endDateStr: this.endDateStr,
					deviceTypeId: this.selectDeviceTypeId
				}
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				uni.hideLoading()
				this.$api('statsDevice.findStatsSalesDeviceTableList',params).then(res => {
					uni.hideLoading()
					if(res.status == 0){
						res.data.forEach(item => {
							item['totalRetailPrice_str'] = "￥"+item['totalRetailPrice'];
							item['profit_str'] = "￥"+item['profit'];
						})
						this.statsDeviceList = res.data;
					}else{
						this.$helpers.toast("请求数据失败:"+res.msg);
					}
				}).catch(e => {
					console.log(e);
					uni.hideLoading()
					this.$helpers.toast('场地查询失败，服务器访问失败');
				})
			},

			sort(e) {
				// 格式化后的属性名需要带_str,我们自己定义的,如果没格式化是数字就能正常排序,不用带_str
				let key = e.name.substring(0, e.name.indexOf("_str")) || e.name;
				// 排序
				this.statsDeviceList.sort((a, b) => {
					return e.sorterMode == '_asc' ? a[key] - b[key] : b[key] - a[key]
				})
			},
			//计算高度
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#header').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight
					for (let i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	.header {
		background-color: #6072FF;

		.select-item {
			width: 83rpx;
			height: 40rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: rgb(96, 114, 255);
			border: 2rpx solid rgba(255, 255, 255, 0.8);
		}

		.no-select-item {
			width: 83rpx;
			height: 40rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
			border: 2rpx solid rgba(255, 255, 255, 0.8);
		}

		.custom {
			width: 156rpx;
			height: 40rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			border: 2rpx solid rgba(255, 255, 255, 0.8);
			border-radius: 20rpx;
		}

		.custom-select {
			width: 156rpx;
			height: 40rpx;
			font-size: 26rpx;
			color: rgb(96, 114, 255);
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			border: 2rpx solid rgba(255, 255, 255, 0.8);
			border-radius: 20rpx;
			background-color: #FFFFFF;
		}

		.filter-criteria-box {
			display: flex;
			margin-top: 40rpx;
			padding: 0 40rpx;
			justify-content: space-between;
			color: #FFFFFF;
			font-size: 26rpx;
			font-weight: 700;

			.filter-criteria {
				display: flex;
				align-items: baseline;

			}
		}

	}

	.content {
		background-color: white;

		/deep/ .odd {
			background-color: #F6F9FF !important;
		}

		/deep/ .item-th {
			background-color: rgb(239, 240, 242) !important;
		}

		/deep/ .item-td {
			width: fit-content !important;
			border-bottom: none !important;
		}
	
	}
</style>
